<template>
  <div class="App">
    <h1>我是App组件</h1>
    <h1>用户访问量：{{num|splitNUms}}</h1>
    <p>价格1：{{price1|commonNum}}</p>
    <Count/>
  </div>
</template>

<script>
import Count from "@/components/Count";
export default {
  name: "App",
  data(){
    return{
      count:1,
      num:2123243535,
      price1:23
    }
  },
  components: {Count},
  comments:{
    Count
  },
  //局部过滤器
  filters:{
    splitNUms(value){
      const reg = /(\d)(?=(\d{3})+$)/g;
      return String(value).replace(reg,'$1,')
    }
  }
}
</script>

<!--scoped表示给当前元素设置作用域，只对当前组件内的元素生效-->
<style scoped>
.App{
  background-color: antiquewhite;
}

/*样式穿透---只在父组件上添加自定义属性，子组件不再添加自定义属性*/
.App >>> .count{
  background-color: aqua;
}
</style>